<template>
  <div class="index-box" ref="index" v-loading='loading'>
    <el-form :inline="true" :model="form" ref="form" :rules="rules" class="demo-form-inline" id="formBox">
      <el-form-item  :prop="'list.' + index + '.paramValue'" :label="item.description+':'" :rules="rules[item.paramKey]" style="margin-right:60px;" v-for="(item,index) in form.list" :key="index">
        <div class="d-flex"><el-input v-model="item.paramValue" type="number" clearable placeholder="" @input="changeInput(item)" style="margin-right:8px"></el-input>{{item.unit}}</div>
      </el-form-item>
      <!-- <el-form-item prop="name" label="运费:" style="margin-left:60px;">
        <div class="d-flex"><el-input v-model="form.name" clearable placeholder="" style="margin-right:8px"></el-input>元</div>
      </el-form-item> -->
    </el-form>
    <div class="activeBox">
      <el-button type="primary" @click="submitSetParams('form')" icon="el-icon-document-checked">保存</el-button>
      <el-button icon="el-icon-refresh"  @click="resetQuery">重置</el-button>
    </div>
  </div>
</template>

<script>
  import {  getSystemParam, setSystemParam } from '@/api/getData';
  export default {
    data() {
      return {
        loading: false,
        form:{
          list:[]
        },
        rules: {
          store_stock_min_value: [
            { required: true, message: '请输入商品库存预警最小值', trigger: 'blur' }
          ],
          freight: [
            { required: true, message: '请输入运费', trigger: 'blur' }
          ],
          customer_service_phone_number: [
            { required: true, message: '请输入客服手机号', trigger: 'blur' }
          ],
        },
      }
    },
    mounted() {
      this.dataInfo();
    },
    methods: {
    	changeInput(row) {
    		if(row.paramKey == 'store_stock_min_value'){
    				var pattern = /^[1-9][0-9]*$/;
			      if (!pattern.test(row.paramValue)) {
			        row.paramValue = ''
			      }  
    		}
      },
      async dataInfo() {
        try {
          this.loading = true;
          const result = await getSystemParam();
          if (result.code == 200) {
              this.form.list = result.data;
          } else {
            this.$message.error(result.msg);
          }
          this.loading = false;
        } catch (err) {
          this.loading = false;
          console.log(err)
        }
      },
      submitSetParams (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.loading = true;
            setSystemParam(this.form.list).then((result) => {
              if (result.code == '200') {
                 this.$message.success(result.msg);
              }else{
                 this.$message.error(result.msg);
              }
               this.loading = false;
            }).catch(err=>{
               this.loading = false;
              console.log(err);
            });

          } else {
            return false
          }
        })
      },
      resetQuery(){
        this.resetForm("form");
      }
    }
  }
</script>

<style scoped lang="scss">

  #formBox{
    height:40%;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
  }
  .activeBox{
    display: flex;
    justify-content: center;
  }
</style>
